<template>
	<view>
		<view class="header" v-bind:class="{'status':isH5Plus}">
			<view class="userinfo">
				<view class="face"><image :src="userinfo.face"></image></view>
				<view class="info">
					<view class="username">{{userinfo.username}}</view>
					<view class="integral">积分:{{userinfo.integral}}</view>
				</view>
			</view>
			<view class="setting"><image src="../../../static/HM-PersonalCenter/setting.png"></image></view>
		</view>
		<view class="orders">
			<view class="box">
				<view class="label" v-for="(row,index) in orderTypeLise" :key="row.name" hover-class="hover"  @tap="toOrderType(index)">
					<view class="icon"><view class="badge" v-if="row.badge>0">{{row.badge}}</view><image :src="'../../../static/HM-PersonalCenter/'+row.icon"></image></view>
					{{row.name}}
				</view>
			</view>
		</view> 
		<!-- <view class="list" v-for="(list,list_i) in severList" :key="list_i">
			<view class="li" v-for="(li,li_i) in list" @tap="toPage(list_i,li_i)" v-bind:class="{'noborder':li_i==list.length-1}"  hover-class="hover" :key="li.name" >
				<view class="icon"><image :src="'../../../static/HM-PersonalCenter/sever/'+li.icon"></image></view>
				<view class="text">{{li.name}}</view>
				<image class="to" src="../../../static/HM-PersonalCenter/to.png"></image>
			</view>
		</view> -->
		<view class="list" >
			<view class="li"  hover-class="hover" @click="toShoppingCart()"> 
				<view class="icon"><image :src="'../../../static/HM-PersonalCenter/sever/point.png'"></image></view>
				<view class="text">我的购物车</view>
				<image class="to" src="../../../static/HM-PersonalCenter/to.png"></image>
			</view>
			<view class="li"  hover-class="hover" @click="toFootprint()" >
				<view class="icon"><image :src="'../../../static/HM-PersonalCenter/sever/footprint.png'"></image></view>
				<view class="text">足迹</view>
				<image class="to" src="../../../static/HM-PersonalCenter/to.png"></image>
			</view>
			<view class="li"  hover-class="hover"  >
				<view class="icon"><image :src="'../../../static/HM-PersonalCenter/sever/momey.png'"></image></view>
				<view class="text">红包</view>
				<image class="to" src="../../../static/HM-PersonalCenter/to.png"></image>
			</view>
			<view class="li"  hover-class="hover" @click="toAddess()" >
				<view class="icon"><image :src="'../../../static/HM-PersonalCenter/sever/addr.png'"></image></view>
				<view class="text">收货地址</view>
				<image class="to" src="../../../static/HM-PersonalCenter/to.png"></image>
			</view>
			<view class="li"  hover-class="hover"  >
				<view class="icon"><image :src="'../../../static/HM-PersonalCenter/sever/kefu.png'"></image></view>
				<view class="text">在线客服</view>
				<image class="to" src="../../../static/HM-PersonalCenter/to.png"></image>
			</view>
			
		</view>
	<view class="btn">
		<button type="success" size="default" shape="circle" @click="wxLogin">
				授权登录</button>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				//#ifdef APP-PLUS
				isH5Plus:true,
				//#endif
				//#ifndef APP-PLUS
				isH5Plus:false,
				//#endif
				userinfo:{},
				orderTypeLise:[
					//name-标题 icon-图标 badge-角标
					{name:'待付款',icon:'l1.png',badge:1},
					{name:'待发货',icon:'l2.png',badge:2},
					{name:'待收货',icon:'l3.png',badge:6},
					{name:'待评价',icon:'l4.png',badge:9},
					{name:'退换货',icon:'l5.png',badge:0}
				],
				severList:[
					// [
					// 	{name:'我的收藏',icon:'point.png'},
					// 	{name:'足迹',icon:'footprint.png'},
					// 	{name:'红包',icon:'momey.png'},
					// 	{name:'任务',icon:'renw.png'},
					// 	{name:'收货地址',icon:'addr.png'},
					// 	{name:'在线客服',icon:'kefu.png'}
					// ],
					
				],
			};
		},
		onLoad() {
			//加载
			this.init();
		},
		methods: {
			// 用户授权登录
			
			wxLogin(){
				
				//         this.$axios
				//           .post("/user/login/", data)
				//           .then(res => {
				//             if (res.data.status == 200) {
				//               this.$message.success(res.data.message);
				//               this.sendKey.userccount = res.data.account;
				//               this.sendKey.usertoken = res.data.token;
				//               //         登录成功产生token放到store
				//               this.$store.commit("$_setStorage", res.data.token);
				//               //         登录成功后取出用户名放到store
				//               this.$store.commit("$_setAccount", res.data.account);
				//               this.$router.push({ path: "/home" });
				// 	}
				// }
				uni.request({
						url:'http://localhost:8009/oauth/access_token',
						//url:'http://107.151.197.197:8009/oauth/access_token',
						
						method:'post',
						data:{
							code:1
						},
						success(res) {
							console.log(res.data.data.access_token)
							uni.setStorageSync("access_token",res.data.data.access_token)
							// uni.setStorageSync(
							// {
							// 	key:'access_token',
							// 	data:res.data.data.access_token
							// }
							// )
							//this.$store.commit("$_setStorage", res.data.data.access_token);
						}
				})
				
			},
			init() {
				//用户信息
				this.userinfo={
					face:'../../../static/HM-PersonalCenter/face.jpeg',
					username:"VIP会员10240",
					integral:"1435"
				}		
			},
			//用户点击订单类型
			toOrderType(index){
				
				uni.navigateTo({
					  //url:`/pages/detail/detail?cid=51&id=253`
					  url:`order_list/order_list?tbIndex=`+index
				})
			},
			//点击用户足迹
			toFootprint(){
				//uni.showToast({title: "啊实打实的"});
				uni.navigateTo({
					  //url:`/pages/detail/detail?cid=51&id=253`
					  url:`/pages/user/user`
				})
				
				
			},
			toShoppingCart(){
				//uni.showToast({title: "啊实打实的"});
				uni.navigateTo({
					  //url:`/pages/detail/detail?cid=51&id=253`
					  url:`/pages/commodity/ShoppingCart/index`
				})
				
				
			},
			
			//点击我的地址
			toAddess(){
				uni.navigateTo({
					 
					  url:`addess`
				})
			
				
			},
			//用户点击列表项
			toPage(list_i,li_i){
				uni.showToast({title: this.severList[list_i][li_i].name});
			}
		}
	}
</script>

<style lang="scss">
page{background-color:#fff}
.header{
	&.status{padding-top:var(--status-bar-height);}
	background-color:#af1a1d;width:100%;height:30vw;padding:0 4%;display:flex;align-items:center;
	.userinfo{
		width:90%;display:flex;
		.face{flex-shrink:0;width:15vw;height:15vw;
			image{width:100%;height:100%;border-radius:100%}
		}
		.info{
			display:flex;flex-flow:wrap;padding-left:30upx;
			.username{width:100%;color:#fff;font-size:40upx}
			.integral{display:flex;align-items:center;padding:0 20upx;height:40upx;color:#fff;background-color:rgba(0,0,0,0.1);border-radius:20upx;font-size:24upx}
		}
	}
	.setting{
		flex-shrink:0;width:6vw;height:6vw;
		image{width:100%;height:100%}
	}
}
.hover{background-color:#eee}
.orders{
	background-color:#af1a1d;width:100%;height:11vw;padding:0 4%;margin-bottom:calc(11vw + 40upx);display:flex;align-items:flex-start;border-radius:0 0 100% 100%;margin-top: -1upx;
	.box{
		width:98%;padding:0 1%;height:22vw;background-color:#fefefe;border-radius:24upx;box-shadow:0 0 20upx rgba(0,0,0,0.15);margin-bottom:40upx;display:flex;align-items:center;justify-content:center;
		.label{
			display:flex;align-items:center;justify-content:center;flex-flow:wrap;width:100%;height:16vw;color:#666666;font-size:26upx;
			.icon{
				position:relative;width:7vw;height:7vw;margin:0 1vw;
				.badge{position:absolute;width:4vw;height:4vw;background-color:#ec6d2c;top:-1vw;right:-1vw;border-radius:100%;font-size:20upx;color:#fff;display:flex;align-items:center;justify-content:center;z-index: 10;}
				image{width:7vw;height:7vw;z-index: 9;}
			}
		}
	}
}
.list{
	width:100%;border-bottom:solid 26upx #f1f1f1;
	.li{
		width:100%;height:100upx;padding:0 4%;border-bottom:solid 1upx #e7e7e7;display:flex;align-items:center;
	&.noborder{border-bottom:0}
		.icon{
			flex-shrink:0;width:50upx;height:50upx;
			image{width:50upx;height:50upx}
		}
		.text{padding-left:20upx;width:100%;color:#666}
		.to{flex-shrink:0;width:40upx;height:40upx}
	}
}
</style>
